<template>
	<div v-loading="loading" class="bg-white p-4 rounded">
		<el-form :model="form" label-width="160px">
			<el-tabs v-model="activeName">

				<el-tab-pane label="支付设置" name="first">
					<el-table :data="tableData" border stripe>
						<el-table-column label="支付方式" align="left">
							<template #default="{ row }">
								<div class="flex items-center">
									<el-image :src="row.src" fit="fill" :lazy="true" style="width:40px;height: 40px;"
										class="rounded mr-2"></el-image>
									<div>
										<h6>{{ row.name }}</h6>
										<small class="flex text-gray-500 mt-1">{{ row.desc }}</small>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="150">
							<template #default="{ row }">
								<el-button type="primary" size="small" text @click="open(row.key)">配置</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>

				<el-tab-pane label="购物设置" name="second">
					<el-form-item label="未支付订单">
						<div>
							<el-input v-model="form.close_order_minute" placeholder="未支付订单" type="number">
								<template #append>
									分钟后自动关闭
								</template>
							</el-input>
							<small class="text-gray-500 flex mt-1">
								订单下单未付款，n分钟后自动关闭，设置0不自动关闭
							</small>
						</div>
					</el-form-item>
					<el-form-item label="已发货订单">
						<div>
							<el-input v-model="form.auto_received_day" placeholder="已发货订单" type="number">
								<template #append>
									天后自动确认收货
								</template>
							</el-input>
							<small class="text-gray-500 flex mt-1">
								如果在期间未确认收货，系统自动完成收货，设置0不自动收货
							</small>
						</div>
					</el-form-item>
					<el-form-item label="已完成订单">
						<div>
							<el-input v-model="form.after_sale_day" placeholder="已完成订单" type="number">
								<template #append>
									天内允许申请售后
								</template>
							</el-input>
							<small class="text-gray-500 flex mt-1">
								订单完成后 ，用户在n天内可以发起售后申请，设置0不允许申请售后
							</small>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="default" @click="submit">保存</el-button>
					</el-form-item>
				</el-tab-pane>

			</el-tabs>
		</el-form>

		<FormDrawer ref="formDrawerRef" title="配置" @submit="submit">
			<el-form v-if="drawerType == 'alipay'" :model="form" label-width="100px">
				<el-form-item label="app_id">
					<el-input v-model="form.alipay.app_id" placeholder="app_id" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="ali_public_key">
					<el-input v-model="form.alipay.ali_public_key" placeholder="ali_public_key" style="width:90%;" type="textarea"
						rows="4"></el-input>
				</el-form-item>
				<el-form-item label="private_key">
					<el-input v-model="form.alipay.private_key" placeholder="private_key" style="width:90%;" type="textarea"
						rows="4"></el-input>
				</el-form-item>
			</el-form>
			<el-form v-else :model="form" label-width="120px">
				<el-form-item label="公众号 APPID">
					<el-input v-model="form.wxpay.app_id" placeholder="app_id" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="小程序 APPID">
					<el-input v-model="form.wxpay.miniapp_id" placeholder="miniapp_id" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="小程序 secret">
					<el-input v-model="form.wxpay.secret" placeholder="secret" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="appid">
					<el-input v-model="form.wxpay.appid" placeholder="appid" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="商户号">
					<el-input v-model="form.wxpay.mch_id" placeholder="商户号" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="API 密钥">
					<el-input v-model="form.wxpay.key" placeholder="API 密钥" style="width:90%;"></el-input>
				</el-form-item>
				<el-form-item label="cert_client">
					<el-upload :action="uploadAction" :headers="{ token }" accept=".pem" :limit="1"
						:on-success="uploadClientSuccess">
						<el-button type="primary" class="btn">点击上传</el-button>
						<template #tip>
							<p class="text-red-500">
								{{ form.wxpay.cert_client ? form.wxpay.cert_client : '还未配置' }}
							</p>
							<div class="el-upload__tip">例如: apiclient_cert.pem</div>
						</template>
					</el-upload>
				</el-form-item>
				<el-form-item label="cert_key">
					<el-upload :action="uploadAction" :headers="{ token }" accept=".pem" :limit="1" :on-success="uploadKeySuccess">
						<el-button type="primary" class="btn">点击上传</el-button>
						<template #tip>
							<p class="text-red-500">
								{{ form.wxpay.cert_key ? form.wxpay.cert_key : '还未配置' }}
							</p>
							<div class="el-upload__tip">例如: apiclient_key.pem</div>
						</template>
					</el-upload>
				</el-form-item>
			</el-form>
		</FormDrawer>

	</div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { getSysconfig, setSysconfig, uploadAction } from "~/api/sysconfig"
import { toast } from "~/composables/util";
import { getToken } from "~/composables/auth"
import FormDrawer from "~/components/FormDrawer.vue";

const token = getToken()
const activeName = ref("first")
const tableData = [{
	name: "支付宝支付",
	desc: "该系统支持即时到账接口",
	src: "/alipay.png",
	key: "alipay"
}, {
	name: "微信支付",
	desc: "该系统支持微信网页支付和扫码支付",
	src: "/wepay.png",
	key: "wxpay"
}]
const form = reactive({
	"close_order_minute": 30,
	"auto_received_day": 7,
	"after_sale_day": 23,
	"alipay": {
		"app_id": "****已配置****",
		"ali_public_key": "****已配置****",
		"private_key": "****已配置****"
	},
	"wxpay": {
		"app_id": "****已配置****",
		"miniapp_id": "****已配置****",
		"secret": "****已配置****",
		"appid": "****已配置****",
		"mch_id": "****已配置****",
		"key": "****已配置****",
		"cert_client": "****已配置****.pem",
		"cert_key": "****已配置****.pem"
	},
})

const loading = ref(false)
function getData() {
  loading.value = true
  getSysconfig().then(res => {
    for (const k in form) {
      form[k] = res[k]
    }
    // form.password_encrypt = form.password_encrypt.split(",")
  }).finally(() => {
    loading.value = false
  })
}

getData()

const submit = () => {
  loading.value = true
  setSysconfig({
    ...form,
    // password_encrypt: form.password_encrypt.join(",")
  }).then(res => {
    toast("修改成功")
    getData()
  }).finally(() => {
    loading.value = false
  })
}

const drawerType = ref("alipay")
const formDrawerRef = ref(null)
const open = (key) => {
	drawerType.value = key
	formDrawerRef.value.open()
}

function uploadClientSuccess(response, uploadFile, uploadFiles) {
	form.wxpay.cert_client = response.data
}

function uploadKeySuccess(response, uploadFile, uploadFiles) {
	form.wxpay.cert_key = response.data
}
</script>

<style scoped>
.btn {
	@apply bg-violet-400 text-light-50;
	height: 34px;
	border-radius: 10px;
	border: none;
	color: #fff;
	cursor: pointer;
}

.btn:hover {
	box-shadow: 0 0 5px rgba(117, 55, 174, 0.502);
}
</style>